<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="产品名称:" prop="productName">
          <el-select v-model="query.productName" placeholder="请选择" @change="$forceUpdate()">
            <el-option
              v-for="item in producArray"
              :key="item.itemValue"
              :label="item.description"
              :value="item.description"
            >
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="状态:" prop="state">
          <el-select v-model="query.state" placeholder="请选择">
            <el-option
              label="未跟进"
              value="0"
            >
            </el-option>
            <el-option
              label="已跟进"
              value="1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间：" prop="createTime">
          <el-date-picker
            v-model="query.createTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="applicant"
        label="姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idNumber"
        label="身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="phone"
        label="手机号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="productName"
        label="产品名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="type"
        label="申请类型"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="提交时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="state"
        label="状态"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span>{{ row.state ? "已跟进" : "未跟进" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mark"
        label="备注"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="followUp(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
          >跟进
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click="delData(scope.row)"
            style="color: #FB575E"
            v-no-more-click
          > 删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="跟进"
      :visible.sync="followUpShow"
      append-to-body
      width="30%"
      center
      @close="followUpCancel"
      :close-on-click-modal="false"
    >
      <div class="genjin-box">
        <span>备注:</span>
        <el-input type="textarea" :rows="3"
                  placeholder="请输入内容" v-model="form.mark"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="followUpCancel">取 消</el-button>
    <el-button type="primary" @click="followUpSubmit">确 定</el-button>
  </span>

    </el-dialog>

  </div>
</template>

<script>
import {
  getPermType,
  prepayPagingQuery,
  prepayFollow,
  prepayDeleteOne
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "PersonnelStaging",
  components: {},
  data() {
    return {
      dialogVisible: false,
      query: {
        pageSize: 10,
        pageNo: 1,
        createTime: "",
        state: "",//状态 0-未跟进 1-已跟进
        productName: ""
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      producArray: [],
      followUpShow: false,
      form: {
        "id": "",
        "mark": ""
      },

    };
  },
  created() {
    this.getProductsData();
    this.getList();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss("business:sign:exportPerson", this.golbalPermissions);
    }
  },
  methods: {
    //删除数据
    delData(item){
      this.$confirm('是否删除当前数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        prepayDeleteOne(item.id).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //提交跟进
    followUpSubmit(){
      prepayFollow(this.form).then(()=>{
        this.$message.success('提交成功');
        this.followUpShow=false;
        this.form.mark='';
        this.getList();
      })
    },
    //取消跟进
    followUpCancel(){
      this.followUpShow=false;
      this.form.mark='';
    },
    //跟进
    followUp(item) {
      this.followUpShow = true;
      this.form.id = item.id;
    },
    // 获取产品数组列表!
    getProductsData() {
      getPermType("order_product").then((res) => {
        this.producArray = res.data;
        console.log(this.producArray);
      });
    },
    //   获取数据
    getList() {
      prepayPagingQuery(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },

    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.getList();
    },
    // 搜索按钮
    queryFun() {
      this.query.pageNo = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 18px;
  color: red;
}

.itemSTyle {
  position: relative;
}

.buttonStyle {
  position: absolute;
  right: 0;
  color: #fff;
  background-color: #fb575e;
}

.spanStyle {
  display: inline-block;
  text-align: right;
  width: 100px;
}

.labelStyle {
  display: inline-block;
  text-align: right;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labelStyles {
  display: inline-block;
  text-align: left;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indexStyle {
  display: inline-block;
  height: 21px;
  width: 33.33%;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.boxStyle {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}

.spanStylek {
  display: inline-block;
  width: 290px;
}

.Maxbox {
  height: 600px;
  overflow: auto;
}

.Maxbox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.Maxbox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 122, 204);
  box-shadow: inset 0 0 5px rgba(0, 122, 204);
}

/*//滚动条底层颜色!*/
.Maxbox::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;

  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.dataStyle {
  margin-top: 30px;
  margin-bottom: 30px;
}

/deep/ input:disabled::-webkit-input-placeholder {
  -webkit-text-fill-color: #3b9df8;
}


.indexell {
  margin-top: 15px;
  color: transparent;
}

.genjin-box {
  display: flex;

}

.genjin-box span {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  display: block;
  width: 50px;
}
</style>
